<template>
    <div>
        <v-btn
                class="d-inline-block"
                outlined
                color="success"
                height="40px"
                @click="fileDialog = true"
        >
            <v-icon left size="25px">mdi-upload-outline</v-icon>
            上传文件
        </v-btn>
        <v-file-input
                id="fileInput"
                v-model="selectedFiles"
                style="display: none"
                multiple
        ></v-file-input>

        <v-dialog
                v-model="fileDialog"
                persistent
                overlay-opacity="0.1"
                width="800px"
        >
            <div
                    style="background-color: white"
                    @dragover.prevent
                    @drop.prevent="drop($event)"
            >
                <!-- 操作按钮 -->
                <div
                        class="py-2"
                        style="border-bottom: 1px solid #dedede;"
                >

                    <v-btn color="primary" :disabled="clicked" class="ml-4" @click="upload()">
                        开始上传
                    </v-btn>

                    <v-btn color="warning" class="ml-2" @click="uploadClick()">
                        选择文件
                    </v-btn>

                    <v-btn @click="close()" color="error" class="float-right mr-4">
                        <v-icon>mdi-close</v-icon>
                    </v-btn>
                </div>
                <!-- 文件信息 -->
                <div class="list-title caption font-weight-regular pt-1">
                    <span class="ml-2">文件个数 {{files.length}}</span>
                    <span class="ml-4">总大小 {{getTotalSize}}</span>
                </div>
                <!-- 文件信息列表 -->
                <v-simple-table>
                    <template v-slot:default>
                        <thead>
                        <tr>
                            <th class="text-left">编号</th>
                            <th class="text-left">文件名</th>
                            <th class="text-left">大小</th>
                            <th class="text-left">状态</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="( item, index ) in files" :key="item.file.name">
                            <td style="width: 60px">
                                {{ index+1 }}
                            </td>
                            <td style="width: 480px;">
                                {{ getFileName(item.file.name) }}
                            </td>
                            <td style="width: 120px;">
                                {{ formatSize(item.file.size) }}
                            </td>
                            <!--上传状态 0准备上传 1上传成功 2正在上传 3重试-->
                            <td style="width: 140px;">
                                <v-btn
                                        v-if="item.status === 0"
                                        small
                                        color="warning"
                                        @click="files.splice(index, 1)"
                                        block
                                        outlined
                                >
                                    <v-icon size="17px" class="mr-1">mdi-trash-can-outline</v-icon>
                                    删除
                                </v-btn>
                                <v-btn
                                        v-if="item.status === 1"
                                        small
                                        color="success"
                                        outlined
                                        block
                                >
                                    <v-icon size="17px" class="mr-1">mdi-check-circle-outline</v-icon>
                                    上传成功
                                </v-btn>
                                <div v-if="item.status === 2">
                                    <v-progress-linear
                                            color="#66BB6A"
                                            rounded
                                            height="10px"
                                            :value="item.progress"
                                    >
                                        <template v-slot="{ value }">
                                            <span style="font-size: 0.4rem">{{value}}%</span>
                                        </template>
                                    </v-progress-linear>
                                </div>
                                <v-btn
                                        v-if="item.status === 3"
                                        small
                                        color="error"
                                        block
                                        @click="reUpload(item)"
                                        outlined
                                >
                                    <v-icon size="17px" class="mr-1">mdi-reload</v-icon>
                                    重试
                                </v-btn>
                            </td>
                        </tr>
                        </tbody>
                    </template>
                </v-simple-table>
            </div>
        </v-dialog>
    </div>
</template>

<script>
    import {formatSize, uploadFile, reUpload, getCapacity} from "../../../util"

    export default {
        name: "MyUploadBtn",
        data() {
            return {
                selectedFiles: [],
                files: [],
                clicked: false,
                fileDialog: false
            }
        },
        methods: {
            uploadFile,
            getCapacity,
            formatSize,
            getFileName,
            reUpload,
            uploadClick() {
                if (this.files.length >= 6) {
                    this.$error({message: '最多只能选择6个文件'});
                    return;
                }
                document.getElementById('fileInput').click();
            },
            upload() {
                if (this.files.length === 0) {
                    return;
                }
                this.uploadFile(this.files, this.$route.query.path)
            },
            close() {
                // 文件上传完成
                if (this.isUpload) {
                    this.$error({message: '请等待文件上传完毕'})
                } else {
                    this.getCapacity();
                    this.files = [];
                    this.clicked = false;
                    this.$emit("upload-success")
                    this.fileDialog = false;
                }
            },
            drop(event) {
                let files = [];
                for (let i = 0; i < event.dataTransfer.files.length; i++) {
                    files.push(event.dataTransfer.files[i])
                }
                this.selectedFiles = files;
            }
        },
        computed: {
            getTotalSize() {
                let totalSize = 0;
                for (const object of this.files) {
                    totalSize += object.file.size;
                }
                return this.formatSize(totalSize);
            },
            isUpload() {
                let flag = false;
                for (const item of this.files) {
                    // 文件处于上传状态
                    if (item.status === 2) {
                        flag = true;
                        break;
                    }
                }
                return flag;
            }
        },
        watch: {
            selectedFiles: function () {
                // 最多只能选择6个文件
                if (this.selectedFiles.length === 0) {

                } else if (this.files.length + this.selectedFiles.length > 6) {
                    this.$error({message: '最多只能选择6个文件'});
                    this.selectedFiles = []
                } else {
                    for (const file of this.selectedFiles) {
                        // 包装选择的文件
                        let filePackage = {
                            status: 0,
                            progress: 0,
                            file: file
                        }

                        // 没有待上传的文件
                        if (this.files.length === 0) {
                            this.files.push(filePackage)
                            continue;
                        }

                        let isExists = false;
                        let index = 0;
                        // 判断文件是否已经存在
                        for (let i = 0; i < this.files.length; i++) {
                            // 存在相同文件
                            if (file.name === this.files[i].file.name
                                && file.type === this.files[i].file.type) {
                               isExists = true;
                               index = i;
                               break;
                            }
                        }

                        if (isExists) {
                            this.files.splice(index, 1, filePackage)
                            this.$success({message: "存在相同文件 " + file.name + " 已进行替换"})
                        } else {
                            this.files.push(filePackage)
                        }


                    }
                    this.selectedFiles = []
                }
            }
        }
    }

    // 截断过长文件名
    function getFileName(name) {
        if (name.length < 30) {
            return name;
        } else {
            return name.substring(0, 31) + "...";
        }
    }
</script>

<style scoped>
</style>